<template>
  <el-upload
      action="#"
      list-type="picture-card"
      v-model="filelist"
      :on-change="handleChange"
      :auto-upload="false"
  >
    <el-icon>
      <Plus/>
    </el-icon>
    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
        <span class="el-upload-list__item-actions">
          <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in/></el-icon>
          </span>
          <!-- <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <el-icon><Download /></el-icon>
                </span> -->
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
          >
            <el-icon><Delete/></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>
  <button @click="handleAdd(file)">确认</button>
  <el-dialog v-model="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt=""/>
  </el-dialog>
</template>
<script>
import {getImage} from "@/api/Image";

export default {
  name: "ImagePreview",
  data() {
    return {
      file: {},
      filelist: [],
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false
    };
  },
  methods: {
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAdd(file) {
      console.log(this.file.url);
      getImage(this.file.url).then(response => {
      });
    },
    handleChange(file, filelist) {
      this.file = filelist[0];
      // console.log("=======================",filelist)
    }
  }
};
</script>
